<template>
  <div class="app-container">
    <!--  搜索重置  -->
    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
      <!--   这里是搜索框   -->
      <el-form-item>
        <el-input
            v-model="queryParams.licensePlateNumber"
            clearable
            placeholder="车牌号"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!--   这里是搜索按钮   -->
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery"
        >搜索
        </el-button
        >
        <!--   这里是重置按钮   -->
        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  车辆列表  -->
    <el-table
        v-loading="loading"
        :data="carList"
        border
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center"/>
      <el-table-column type="expand" width="120" label="车辆详情">
        <template #default="scope">
          <el-table :data="scope.row.addressList" size="small" border>
            <el-table-column
                type="index"
                label="序号"
                width="100"
                align="center"
            />
            <el-table-column align="center" label="车牌号" prop="licensePlateNumber"/>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="100" align="center"/>
      <el-table-column label="头像" width="100">
        <template #default="scope">
          <el-popover placement="right" :width="400" trigger="hover">
            <img :src="scope.row.avatarUrl" width="400" height="400"/>
            <template #reference>
              <img
                  :src="scope.row.avatarUrl"
                  style="max-height: 60px; max-width: 60px"
              />
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="status" width="80" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
          <el-tag v-else type="info">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="购买时间"/>

    </el-table>

    <!-- 分页工具条 -->
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, toRefs} from "vue";

import {listCarPages} from "@/api/car/car";
import {CarItem, CarQueryParam} from "@/types";

const state = reactive({
  // 遮罩层
  loading: true,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  } as CarQueryParam,
  carList: [] as CarItem[]
});

const {loading, ids, single, multiple, queryParams, carList, total} =
    toRefs(state);

function handleQuery() {
  state.loading = true;
  listCarPages(state.queryParams).then(({data}) => {
    state.carList = data.list;
    state.total = data.total;
    state.loading = false;
  });
}

function resetQuery() {
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
    licensePlateNumber: undefined,
  };
  handleQuery();
}

function handleSelectionChange(selection: any) {
  state.ids = selection.map((item: { id: any }) => item.id);
  state.single = selection.length != 1;
  state.multiple = !selection.length;
}

onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
</style>
